<template>
  <div class="page lists-show">
    <nav>
        <!--移动端的菜单图标，浏览器窗口尺寸小于40em时候显示-->
      <div class="nav-group">
        <a class="nav-item">
          <span class="icon-list-unordered"> </span>
        </a>
      </div>

      <!-- 标题和未完成的数量 -->
      <h1 class="title-page">
        <span class="title-wrapper">{{todo.title}}</span>
        <span class="count-list">{{todo.count || 0}}</span>
      </h1>

      <!-- 锁定图标和删除图标，目前icon引入失败 -->
      <div class="nav-group right"><!-- 右边的删除，锁定图标容器-->
        <div class="options-web">
          <a class=" nav-item"> <!-- 锁定图标-->
            <span class="icon-lock" v-if="todo.locked"></span>
            <span class="icon-unlock" v-else></span>
          </a>
          <a class=" nav-item"><!-- 删除图标-->
            <span class="icon-trash"> </span>
          </a>
        </div>
      </div>

      <div class=" form todo-new input-symbol">
        <!-- 新增单个代办单项输入框,监听了回车事件，双向绑定text值,监听了disabled属性，在todo.locked为true的情况下无法编辑-->
        <input type="text" v-model="text" placeholder='请输入' @keyup.enter="onAdd" :disabled="todo.locked" />
        <span class="icon-add"> + </span>
      </div>
    </nav>

    <!-- 代办项列表 -->
    <div class="content-scrollable list-items">
      <div v-for="(item,index) in items" :key="index">
        <item :item="item"></item>
      </div>
    </div>
  </div>
</template>

<script>
import item from './item'
export default {
  data () {
    return {
      todo: {
        title: '星期一',
        count: 12,
        locked: false
      },
      items: [],
      text: '' // 新增代办单项绑定的值
    }
  },
  // props: ['todo'],
  components: {
    item
  },
  methods: {
    onAdd () {
      if (this.text !== '') {
        this.items.push({
          content: this.text, checked: false, isDelete: false
        }) // 当用户点击回车时候 ，给items的值新增一个对象，this.text 即输入框绑定的值
        this.text = '' // 清空输入框的值
      }
    }
  }
}
</script>

<style lang="scss">
@import '../common/style/nav.scss';
@import '../common/style/form.scss';
@import '../common/style/todo.scss';
</style>
